<template>
    <div class="wrap">
        <div style="text-align: center;"><H1>ES搜索页面</H1></div>
        <div style="width: 400px;">
            <el-form :inline="true" :model="formInline" class="demo-form-inline">
              <el-form-item label="">
                <el-input
                    style="float: left;"
                    placeholder="请输入内容"
                    v-model="formInline.keyWord">
                    <i slot="prefix" class="el-input__icon el-icon-search"></i>
                </el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="onSearch">查询</el-button>
              </el-form-item>
            </el-form>
        </div>
        <div>
            <el-table :data="tableData" style="width: 100%">
                <el-table-column label="id" prop="blogId" width="180">
                </el-table-column>
                <el-table-column prop="blogTitle" label="标题" width="180">
                    <template slot-scope="scope">
                        <div v-html="scope.row.blogTitle"></div>
                    </template>
                </el-table-column>
        
                <el-table-column prop="userId" label="作者" width="180">
                </el-table-column>
                <el-table-column prop="imageName" label="博客封面" width="180">
                    <template slot-scope="scope">
                        <img :src="scope.row.imageName" alt="" width="100" height="100">
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="page">
            <el-pagination background layout="total, prev, pager, next" :current-page="currentPage" :page-size="pageSize"
                @current-change="changePageNum" :total="total">
            </el-pagination>
        </div>
    </div>
</template>

<script>
    import {searchElasticByKeyword} from '../api/api.js'
    export default {
        data() {
            return {
                tableData: [],
                currentPage: 1,
                pageSize: 2,
                total: 0,
                formInline: {
                    keyWord: ''
                }
            }
        },
        created() {
            this.doSearch()
        },
        methods: {
            changePageNum(value) {
                console.log('changePageNum', value);
                this.currentPage = value
                this.doSearch()
            },
            onSearch() {
                this.doSearch()
            },
            
            // 发送搜索请求
            doSearch() {
                let param = {}
                param.keyWord = this.formInline.keyWord
                param.pageNum = this.currentPage
                param.pageSize = this.pageSize
                searchElasticByKeyword(param)
                .then(res => {
                    if(res.data.code === 200) {
                        console.log(res.data);
                        this.tableData = res.data.data.records
                        this.currentPage = res.data.data.pageNum
                        this.total = res.data.data.count
                        this.pageSize = res.data.data.pageSize
                    }
                })
            }
        }
    }
</script>

<style>
    .wrap {
        width: 800px;
        margin: auto;
    }
</style>
